import React, { useState, useEffect, useRef } from 'react';
import { Space, Table, Button, Switch, Tabs, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { fang_house_sand } from '@/api/index';
import Draggable from 'react-draggable';
import html2canvas from 'html2canvas';
import './sand.less';
function sand() {
  const canvasImg = useRef<any>('');
  const [data, serData] = useState([]);
  const [img, setImg] = useState('');
  const [flag, setFlag] = useState(false);
  const [flag1, setFlag1] = useState(false);
  const [list, setList] = useState([]);
  useEffect(() => {
    fang_house_sand().then((res: any) => {
      let arr = res.data.RECORDS;
      arr.forEach((item: any) => {
        item.text = '添加';
      });
      serData(arr);
    });
  }, []);
  console.log(data);
  const onChange = (key: string) => {
    console.log(key);
  };
  const save = () => {
    setFlag(true);
    //html2canvas 1 配置元素 2 配置项
    html2canvas(canvasImg.current, {
      useCORS: true,
    }).then((canvas) => {
      const url = canvas.toDataURL();
      setImg(url);
    });
  };
  console.log(flag1);
  const items: any = [
    {
      key: '1',
      label: `上传沙盘图片`,
      children: (
        <div>
          <div ref={canvasImg} style={{ width: 200, height: 200 }}>
            {list &&
              list.map((item, index) => {
                return (
                  <Draggable key={index}>
                    <div
                      style={{
                        position: 'absolute',
                        left: '120px',
                        top: 30,
                      }}
                    >
                      <span className="float">{item}</span>
                    </div>
                  </Draggable>
                );
              })}
            <img
              width={200}
              height={200}
              src="https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
              alt=""
            />
          </div>
          {flag ? (
            <div>
              <img src={img} alt="" style={{ width: 200, height: 200 }} />
            </div>
          ) : (
            ''
          )}
        </div>
      ),
    },
    {
      key: '2',
      label: `保存沙盘`,
      children: (
        <img
          width={'100%'}
          height={200}
          src="https://picnew11.photophoto.cn/20170719/xiaoqingxi…uibeijingpsdfencengguanggaobeijing-32863011_1.jpg"
          alt=""
        />
      ),
    },
    {
      key: '3',
      label: `删除沙盘`,
      children: (
        <img
          width={'100%'}
          height={200}
          src="	https://picnew13.photophoto.cn/20190122/lanzisejianbianhaibaobeijing-32408802_1.jpg"
          alt=""
        />
      ),
    },
  ];
  const columns: ColumnsType<any> = [
    {
      title: '楼栋名称',
      dataIndex: 'title',
      key: 'name',
      align: 'center',
    },
    {
      title: '楼层数',
      dataIndex: 'floor_num',
      key: 'floor_num',
      align: 'center',
      render: (item: any, record: any) => {
        return item ? item : 10;
      },
    },
    {
      title: '销售状态',
      dataIndex: `sale_status`,
      key: 'sale_status',
      align: 'center',
      render: (_: any, record: any) => (
        <Space size="middle">
          <span> {record.sale_status > 0 ? '在售' : '不出售'}</span>
        </Space>
      ),
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      dataIndex: 'status',
      render: (_: any, record: any) => (
        <Space size="middle">
          <Switch defaultChecked></Switch>
        </Space>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any) => (
        <Space size="middle">
          <Button
            type="primary"
            onClick={() => {
              if (_.text == '添加') {
                _.text = '移除';
                let arr = [...data];
                let list1: any = [...list];
                list1.push(_.title);
                setList(list1);
                serData(arr);
                setFlag1(true);
              } else {
                _.text = '添加';
                let arr = [...data];
                let list1 = [...list];
                let index = list1.findIndex((item) => item === _.title);
                list1.splice(index, 1);
                setList(list1);
                serData(arr);
                setFlag1(false);
              }
            }}
          >
            {_.text}
          </Button>
          <Button type="primary" ghost>
            编辑
          </Button>
          <Button type="primary" danger>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div className="box">
      <div className="wrap">
        <Table columns={columns} dataSource={data} />
      </div>
      <div className="wrap">
        {' '}
        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
        <Button onClick={save}>保存</Button>
      </div>
    </div>
  );
}

export default sand;
